<template>
  <view class="bg-white padding-sm">
    <uni-section title="上传图片" type="line">
      <view class="example-body">
        <uni-file-picker limit="9" title="最多选择9张图片"
                         @select="select"
                         @progress="progress"
                         @success="success"
                         @fail="fail"

        ></uni-file-picker>
      </view>
    </uni-section>

    <uni-section title="内容" subTitle="填写介绍内容" type="line" padding>
      <uni-easyinput type="textarea" maxlength="-1"  v-model="substance" placeholder="请输入内容"></uni-easyinput>
    </uni-section>

    <button type="primary" @click="onsubmit">提交</button>
  </view>
</template>

<script>
import {uploadFile} from "@/api/system/user.js"
import {publishUpdates} from "../../api/flower/updates";
export default {
  name: "publishForum",
  data() {
    return {
      substance:"",
      imageUrls:[]
    }
  },
  methods: {
    // 获取上传状态
    select(e){

      console.log("上传图片");
      console.log(e);
      let that = this;
      let filePaths = e.tempFilePaths;
      //遍历filePaths
      for(let i = 0;i<filePaths.length;i++){
        let imgPath = filePaths[i];
        uploadFile({
          filePath:imgPath,
          name:"file",
        }).then(res => {
          console.log(res);
          //that.imageUrl = res.fileName;
          that.imageUrls.push(res.fileName);
        });
      }
    },
    // 获取上传进度
    progress(e){
      console.log('上传进度：',e)
    },

    // 上传成功
    success(e){
      console.log('上传成功')
    },

    // 上传失败
    fail(e){
      console.log('上传失败：',e)
    },


    onsubmit(){
      //发布个人动态 publishUpdates
      //传 title 标题 thumImg 图片  content 内容 gridImgUrls 九宫格图片(地址用逗号分割) 非必填项
      //判断图片数量是否大于1
      if(this.imageUrls.length>0){
        //弹出框提示 标题 内容 图片必须不能为空
        if(this.substance==""){
          uni.showToast({
            title: '请完整信息',
            icon: 'none'
          });
        }else{
          //拼接字符串
          let gridImgUrls = this.imageUrls.join(",");
          //提交数据
          console.log("提交数据")
          //调用发帖接口

          publishUpdates({
            //title:this.title,
            thumImg:this.imageUrls[0],//第一张图片作为封面图
            gridImgUrls:gridImgUrls,
            content:this.substance,
          }).then(res => {
            console.log(res);
            console.log(res.data);
            //增加发帖成功的弹窗
            uni.showToast({
              title: '发帖成功',
              icon: 'none'
            });
            //跳转到上一个页面，并且刷新上一个页面
            uni.navigateBack({
              delta: 1
            });
          });

        }
      }else{
        uni.showToast({
          title: '图片至少要有一张',
          icon: 'none'
        });
      }



    },


  }
}
</script>

<style lang="less" scoped>

</style>